亚洲精品国产综合久久久久紧,久久久久99精品成人片直播,被窝影院午夜无码国产,久久久久波多野结衣高潮

聯(lián)
咨詢熱線:

185-9527-1032

聯(lián)系QQ:

2863379292

官方微信:

關(guān)于圖片的性能優(yōu)化,作為設(shè)計(jì)師的你知道多少

建站經(jīng)驗(yàn)

導(dǎo)讀:做B端軟件產(chǎn)品,由于大多數(shù)企業(yè)電腦設(shè)備更新?lián)Q代周期長,致使大多員工用的電腦老舊性能差,為了讓軟件運(yùn)行使用流暢,軟件自身性能的重要性不言而喻(想想你曾經(jīng)卸載狂拽炫酷吊炸天的

發(fā)表日期:2020-07-11

文章編輯:興田科技

瀏覽次數(shù):9451

標(biāo)簽:

做B端軟件產(chǎn)品,由于大多數(shù)企業(yè)電腦設(shè)備更新?lián)Q代周期長,致使大多員工用的電腦老舊性能差,為了讓軟件運(yùn)行使用流暢,軟件自身性能的重要性不言而喻(想想你曾經(jīng)卸載狂拽炫酷吊炸天的360),卡頓是大忌,作為一名產(chǎn)品設(shè)計(jì)師,如何兼得美麗與才華而又不失用戶體驗(yàn)?

何為性能優(yōu)化

簡而言之,就是在不影響系統(tǒng)運(yùn)行正確性的前提下,使之運(yùn)行地更快,完成特定功能所需的時(shí)間更短。

摘自百度百科

性能優(yōu)化的好處

對軟件自身而言,能夠減少網(wǎng)絡(luò)請求、節(jié)省寬帶資源和數(shù)據(jù)空間,從而提高軟件性能及自身的易用性;

從用戶感知方面,頁面加載更流暢、操作響應(yīng)更及時(shí),帶來良好的使用體驗(yàn)。

設(shè)計(jì)師能做什么

性能優(yōu)化雖是程序員嘴中常常念叨且擅長的事情,其實(shí)設(shè)計(jì)師也能從自身角度-“圖片的優(yōu)化”來貢獻(xiàn)力量。提高Web站點(diǎn)的用戶體驗(yàn),一個(gè)很重要的方面就是保證網(wǎng)頁的呈現(xiàn)速度,其中網(wǎng)站靜態(tài)資源-圖片通常占據(jù)了頁面下載的絕大部份,因此從性能優(yōu)化角度而言,圖片絕對是重點(diǎn)之一,優(yōu)化圖片能極大的節(jié)約寬帶提升性能。

以下是一些個(gè)人的總結(jié)及工作經(jīng)驗(yàn),開始碼字,帶上你的小板凳,前排擠擠:

1.選對格式

圖片格式多種多樣,其自身的優(yōu)缺點(diǎn)決定了使用場景及環(huán)境,在什么情況下采用何種的圖片格式,是我們作對的第一步,首先從了解他們?nèi)胧郑?/p>

JpEG是第一個(gè)國際圖像壓縮標(biāo)準(zhǔn),.jpg和.jpeg是JpEG文件壓縮封存后常見的圖片格式,均為有損壓縮,且會產(chǎn)生迭代有損。JpEG可通過不同的壓縮比,去除圖像的部分信息和色彩數(shù)據(jù),來降低原有文件的大小,同樣設(shè)計(jì)師也可以根據(jù)具體情況在圖像質(zhì)量和文件大小之間找到平衡,特別適用于層次豐富,色彩較多的圖像。

JpEG2000,作為JpEG的升級版,它具備更高壓縮率,同時(shí)支持有損、無損壓縮和漸進(jìn)傳輸?shù)墓δ芗捌渌绿匦裕仨毷侨〈鶭pEG的節(jié)奏。

pNG,是一種無損壓縮的位圖格式,支持索引、RGB、灰度和Alpha通道等特性,具有較高的壓縮空間,保真效果好,支持透明,且定義了 256個(gè)透明層次。適用于色彩簡單,對比強(qiáng)烈的圖片,像圖標(biāo)icon等,pNG也可以被用來無失真的儲存照片,但文件較太大并不適合網(wǎng)絡(luò)呈現(xiàn)(像珍貴圖像等其他所需另當(dāng)別論)

GIF,常用于圖像動畫,具有高壓縮比的特性,占用空間小,保存的圖像只支持 256色,會損失大量細(xì)節(jié),但利于下載,組成的動畫適合網(wǎng)絡(luò)傳播。

SVG,矢量圖形格式,能夠清晰的顯示在任何分辨率設(shè)備,無需適配。SVG,是一種基于XML(可擴(kuò)張性標(biāo)記)的語言,采用文本傳輸且可被搜索,支持多種編輯(色彩變化,動畫效果等)具有較強(qiáng)的交互和動態(tài)性。

Webp, 2010年由谷歌開發(fā),文件壓縮方面比JpEG更加優(yōu)越,同時(shí)支持有損和無損壓縮,但解碼時(shí)間卻相對較慢。此前有eBay團(tuán)隊(duì)的測試,同時(shí)顯示 50張同質(zhì)量的Webp和jpg,Webp比jpg顯示快了 2倍多,Webp雖然會增加解碼的時(shí)長,但減少了文件體積,縮短了加載時(shí)間,以致實(shí)際渲染速度更快。谷歌家的產(chǎn)物,且未被Web標(biāo)準(zhǔn)采納,其他平臺及瀏覽器的支持性相對較差,但可以在不支持的環(huán)境中進(jìn)行的功能降級處理。

關(guān)于圖片的性能優(yōu)化,作為設(shè)計(jì)師的你知道多少 網(wǎng)站怎么做備案

以下對上述常用的圖片格式做了簡單的對比總結(jié):

關(guān)于圖片的性能優(yōu)化,作為設(shè)計(jì)師的你知道多少 網(wǎng)站怎么做備案

2.一圖多用

以下介紹了一些小技巧,從而達(dá)到減少圖片的使用:

opacity,通過透明度的處理,且在不影響用戶體驗(yàn)和設(shè)計(jì)的目的情況下,我們便可以只使用一張圖片就能搞定控件的多種狀態(tài),從而減少圖片的使用和網(wǎng)絡(luò)請求。

關(guān)于圖片的性能優(yōu)化,作為設(shè)計(jì)師的你知道多少 網(wǎng)站怎么做備案

SVG,可通過css樣式完成對圖片色彩的變換,從而也減少了多張圖片的使用。

css sprite,俗稱雪碧圖,就是把網(wǎng)頁中一些圖片整合到一張圖片文件中,再利用CSS定位顯示所需要顯示圖片的位置。好處在于能夠在網(wǎng)頁加載圖片時(shí)減少對服務(wù)器的請求次數(shù),同時(shí)合并后的圖片應(yīng)用統(tǒng)一色表儲存,因此單獨(dú)的一張的雪碧圖在大小上可能比之前的多張小圖片總的尺寸還要小,降低服務(wù)器儲存和請求壓力,同時(shí)提高了頁面的加載速度。

關(guān)于圖片的性能優(yōu)化,作為設(shè)計(jì)師的你知道多少 網(wǎng)站怎么做備案

3.無圖模式

拉上你的前端小伙伴,開啟無圖模式:

css,Web的諸多樣式其實(shí)都是可以都過css來實(shí)現(xiàn),例如簡單的幾何圖形、圓角、漸變、陰影等等(考慮IE 8的還是有些雞肋),代碼畢竟屬于文本模式,請求資源小,加載和渲染速度都是圖片不可比擬的,每一個(gè)圖片的加載都需要一個(gè)http的請求,而瀏覽器同一時(shí)間對同一域名下的請求是有一定數(shù)量限制,超過限制數(shù)目的請求會被阻塞,從而延長用戶的感知時(shí)間,因此減少請求次數(shù),也就提高了頁面的呈現(xiàn)速度。另外通過css實(shí)現(xiàn),在任何屏幕上都可以顯示出良好視覺的效果,無需多分辨率、多端適配。若軟件具有的自定義外觀的功能,css的優(yōu)勢就更加的明顯強(qiáng)大,屬性修改一下就ok了。

iconfont,圖標(biāo)字體,其實(shí)字體就是圖形化的東西,把圖標(biāo)處理成字體來顯示在屏幕上,同樣瀏覽器也會將其視為字體進(jìn)行抗鋸齒處理,有時(shí)效果并沒有想象中的那么清晰銳利(相對與純圖片效果還是相當(dāng)可人的)。iconfont,作為字體,其位置和大小也會受css屬性的影響,同時(shí)為了得到最大范圍的瀏覽器支持,需要生成TTF、WOFF、EOT、SVG四種字體格式,不過這些問題交給阿里UX矢量庫就好了。

感悟

就像自己,也會在使用產(chǎn)品中,因長時(shí)間的等待加載而煩躁不安,從而影響操作和心情,作為一名產(chǎn)品設(shè)計(jì)師你需要為用戶著想,而不是看著自己的設(shè)計(jì)稿覺得NB,你需要去真正用、去運(yùn)行你的產(chǎn)品,才知道什么是產(chǎn)品設(shè)計(jì)。

相關(guān)推薦

更多新聞